<template>
    <div class="suspend-menu-box" :style="mStyle" ref="menuBox" v-if="state">
        <div class="suspend-menu-title">
            <p>{{title}}</p>   
            <span class="edit-close" @click="hideMenu">×</span>
        </div>
        <div class="suspend-menu-slot">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    //悬浮菜单组件
    export default {
        props: {
            //menu的样式
            mStyle: {
                type: Object,
                default() {
                    return {
                        height: "350px"
                    }
                }
            },
            //关联dom的id
            correlationId: {
                type: String,
                default: ""
            },
            //根元素的选择器，默认为浏览器视窗
            rootSelector: {
                type: String,
                default: ""
            },
            title: {
                type: String,
                default: "请选择"
            }
        },
        data() {
            return {
                state: false
            }
        },
        computed: {

        },
        methods: {
            //自动计算当前菜单在上还是在下
            judgeDirection() {
                //获取关联dom的位置
                // console.log("this.correlationId", this.correlationId);
                let dom = document.querySelector(this.correlationId);
                // console.log("dom", dom);
                // console.log("dom.getBoundingClientRect().bottom", dom.getBoundingClientRect().bottom);
                let domHeight = dom.offsetHeight;//关联元素的高度
                let top = dom.getBoundingClientRect().top;//关联元素距离视窗顶部的距离
                let bottom = window.innerHeight - dom.getBoundingClientRect().bottom;//关联元素距离视窗底部的距离
                let left = dom.getBoundingClientRect().left;//关联元素距离视窗左部的距离
                let menuHeight = parseInt(this.mStyle.height.slice(0, -2));//菜单的高度
                if (this.rootSelector) {
                    // console.log(this.rootSelector);
                    let root;
                    let roots = document.querySelectorAll(this.rootSelector);
                    for (let el of roots) {
                        if (el.style.transform) {
                            root = el;
                            break;
                        }
                    }
                    root && (top = top - root.getBoundingClientRect().top);
                    // console.log("root.getBoundingClientRect().left", root.getBoundingClientRect().left);
                    // console.log("root", root);
                    // console.log("roots", roots);
                    root && (left = left - root.getBoundingClientRect().left);
                }
                //下面没有足够的空间放置悬浮菜单
                if (bottom < menuHeight) {
                    //设置offsetTop
                    this.offsetTop = top;
                    this.offsetLeft = left;
                    // return "top";
                    return;
                }
                //设置offsetTop
                // console.log(top, domHeight);
                this.offsetTop = top + domHeight;
                this.offsetLeft = left;
                // return "bottom";
            },
            setOffsetTop() {
                this.judgeDirection();
                console.log(this.offsetTop);
                console.log(this.offsetLeft);
                // let dom = document.querySelector(".suspend-menu-box");
                // dom.style.top = `${this.offsetTop}px`;
                // dom.style.left = `${this.offsetLeft}px`;
                this.$refs.menuBox.style.top = `${this.offsetTop}px`;
                this.$refs.menuBox.style.left = `${this.offsetLeft}px`;
            },
            showMenu() {
                this.state = true;
                //为了体验，先置为opacity=0
                setTimeout(() => {
                    this.setOffsetTop();
                    this.$refs.menuBox.style.opacity = "1";    
                }, 0);
            },
            hideMenu() {
                this.state = false;
            }
            

        },

    }
</script>
<style scoped>
    .suspend-menu-title {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        align-items: center;
        /* margin-bottom: 15px; */
        padding: 10px;
        box-sizing: border-box;
    }
    .edit-close {
		font-size: 20px;
		font-weight: bold;
		color: #ddd;
		cursor: pointer;
	}
	.edit-close:hover {
		color: #444;
    }
    .suspend-menu-slot {
        padding: 10px;
    }
    .suspend-menu-box {
        position: fixed;
        z-index: 10;
        width: 300px;
        background: #fff;
        overflow-y: auto;
        opacity: 0;
        border: 1px solid #ddd;
    }
</style>